<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>欧普商城</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/public.css">
    <link rel="stylesheet" href="./css/detail.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1993122_z2zu5zv3et.css">
    <script src="./js/jquery.min.js"></script>
    <script src="./js/citys.js"></script>
<body>
    <header>
            <div class="h_top">
                <div class="main h_main">
                    <span class="iconfont icon-ziyuan"></span><span class="h_span1"><span>送货地址：</span><span class="h_city">上海</span><i class="iconfont icon-xiala xiala1"></i></span>
                    <ul class="ul1">
                        
                        <li><a href="" class="h_a1"style="color:#000;">HI,请登录</a></li>
                        <li><a href="">免费注册</a></li>
                        <li><a href="">我的订单</a></li>
                        <li><a href="" class="h_a2" id="ul1_a2">个人中心 <i class="iconfont icon-xiala xiala2"></i></a></li>
                        <li><a href="" class="h_a1" id="ul1_a1">手机服务</a></li>
                    </ul>
                </div>
            </div>

            <div class="h_nav">
                <div class="main h_main">
                    <img src="./img/logo.png" alt="">
                    <div class="nav_cen">
                        <input type="text" placeholder="88家装汇" class="nav_input"><span class="iconfont icon-sousuo"></span>
                        <ul>
                            <li>客厅灯</li>
                            <li>卧室灯</li>
                            <li>简灯</li>
                            <li>书房灯</li>
                        </ul>
                    </div>
                    <div class="nav_right">
                        <span class="iconfont icon-gouwuche"></span><span>购物车</span>
                    </div>
                    <div class="main h_main h_mainBox">
                        <div class="box1">
                            <ul class="box1_ul1">
                                <li>A 安徽省  澳门特别行政区</li>
                                <li>B 北京</li>
                                <li>C 重庆</li>
                                <li>D 钓鱼岛</li>
                                <li>F 福建省</li>
                                <li>G 广东省 广西壮族自治区 贵州省 甘肃省</li>
                                <li>H 河北省 黑龙江省 河南省 湖北省 湖南省 海南省</li>
                            </ul>
                            <ul class="box1_ul2">
                                <li>J 江苏省 吉林省 江西省</li>
                                <li>L  辽宁省</li>
                                <li>N 内蒙古自治区 宁夏回族自治区</li>
                                <li>Q 青海省</li>
                                <li>S 山西省 上海 陕西省 山东省 四川省</li>
                                <li>T 天津 台湾</li>
                                <li>X 西藏自治区 新疆维吾尔自治区 香港特别行政区</li>
                                <li>Y 云南省</li>
                                <li>Z 浙江</li>
            
                            </ul>
                        </div>
                        <div class="box2">
                            <ul>
                                <li>待处理订单</li>
                                <li>消息</li>
                                <li>我的收藏</li>
                                <li>我的问答</li>
                                <li>我的消费券</li>
                                <li>售后服务</li>
                            </ul>
                        </div>
                        <div class="box3">
                            <h6>欧普照明商城</h6>
                            <img src="./img/QR_code.png" alt="">
                        </div>
                    </div>
                    <div class="h_bottom">
                        <div class="main h_main">
                            <h2>商品分类</h2>
                            <ul class="h_bottomUl">
                                <a href="http://127.0.0.1:56/home.html"><li>首页</li></a>
                                <li>特价清仓</li>
                                <li>服务中心</li>
                                <li>积分商城</li>
                                <li>灯饰灯具</li>
                                <li>浴霸吊顶</li>
                                <li>开关插座</li>
                                <li>精工卫浴</li>
                                <li>风扇灯</li>
                            </ul> 
                        </div>
                    </div>
                    
                </div>
                
            </div>
           
           <!-- 边上的条 -->
           <div id="gloal-bg">
                <div class="fix-nav">
                    <ul>
                       <li><span class="car"></span>
                           <em class="em em-content1 em1">购物车</em></li>
                       <li><span class="ear"></span>
                        <em class="em em-content2 em1">客服</em></li>
                       <li><span class="code"></span>
                        <em class="em1 em-content"><img src="./img/QR_code.png" alt=""><h2>手机购物更优惠</h2></em></li>
                       <li><span class="phone"></span>
                        <em class="em em-content3 em1">消息</em></li>
                    </ul>
                </div>
                <div class="fix-top">
                    <a href="#"><span class="toTop"></span>
                        <em class=" goTop">返回顶部</em>
                    </a>
                </div>
           </div>
    </header>
    <article>
        <div class="main ar_main">
            <div class="main_left ">
                <a href="http://127.0.0.1:56/home.html"class="a1">首页</a>
                <span>></span>
                <a href=""class="a1">家居</a>
                <span>></span>
                <a href="">吊灯</a>
                <span>></span>
                <a href="">欧式客厅吊灯 全铜餐厅客厅家用</a>
            </div> 
            <div class="content">
                <!-- 大图 -->
                <div class="left">
                    <div class="original">      
                        <img src="./img/s1.jpg" alt="" class="im1">
                        <div class="mask"></div>
                    </div>
                    <div class="bigbox"><img src="./img/s1.jpg" alt="" class="im2"></div>
                    <!-- 小图 -->
                    <div class="picbox">
                        <span id="btn1"></span>
                        <div class="picUl">
                            <ul>
                                <li><a href=""><img src="./img/s1.jpg" alt=""class="liImg"></a></li>
                                <li><a href=""><img src="./img/s2.jpg" alt=""class="liImg"></a></li>
                                <li><a href=""><img src="./img/s3.jpg" alt=""class="liImg"></a></li>
                                <li><a href=""><img src="./img/s4.jpg" alt=""class="liImg"></a></li>
                                <li><a href=""><img src="./img/s5.jpg" alt=""class="liImg"></a></li>
                                <li><a href=""><img src="./img/s6.jpg" alt=""class="liImg"></a></li>
                            </ul>
                        </div>
                        <em id="btn2"></em>
                    </div>
                </div>
                <div class="right">
                    <h3>欧式客厅吊灯 全铜餐厅客厅家用</h3>
                    <h4>隐形风扇灯，多款可选</h4>
                    <div class="r_items">
                        <dl class="firstDl">
                            <dt>价格</dt>
                            <dd><span class="jiage">￥429</span>
                            <i>￥2099.00</i></dd>
                        </dl>
                        <dl class="secondDl">
                            <dt>促销</dt>
                            <dd><span>满减</span>
                                <span class="manjian">每满499减30</span>
                                <a href="">查看详情</a>
                                <span class="cuxiao">共计1项促销</span>
                                <span class="tubiao"></span>
                            </dd>
                        </dl>
                    </div>
                    <div class="total">
                        <div class="sales">累计销量<span>547</span></div>
                        <div class="asess">累计评价<span>186</span></div>
                    </div>
                    <dl class="thirdDl">
                        <dt class="binding">数量</dt>
                        <dd>
                            <div class="count">
                                <input class="num" data-min="1" data-max="9999"value="1"readonly="readonly">
                                <div class="count-btn">
                                    <input type="button" class="add " value="▲" >
                                    <input type="button" class="sub " value="▼" >
                                </div>
                                <span class="num-text">件</span>
                            </div>
                        </dd>
                        <dd class="stock-text">
                            库存1393件
                        </dd>
                        <div class="separator"></div>
                    </dl>
                    <dl class="fourDl">
                        <dt>配送至</dt>
                        <dd>
                            <a class="spaddress " href="#">
                                <select name=""  id="province"></select>
                                <select name=""  id="city"></select>
                                <select name=""  id="area"></select>
                                <span class="finish" style="opacity: 0;"></span>
                            </a>
                        </dd>
                    </dl>
                    <div class="bttn">
                        <a href="http://127.0.0.1:56/jiesuan.html?" class="car-color1">立即购买</a>
                        <a href="http://127.0.0.1:56/shopping.html" class="car-color2"><span> </span>加入购物车</a>  
                    </div>
                    <dl class="fiveDl">
                        <dt>服务承诺</dt>
                        
                        <dd style="width: 670px">
                            <span href="#" class="ng-binding ng-scope"><i></i>官方正品</span>
                            <span href="#" class="ng-binding ng-scope"><i></i>7天退换货</span>
                            <span href="#" class="ng-binding ng-scope"><i></i>三年质保</span>
                            <span href="#" class="ng-binding ng-scope"><i></i>全场包邮</span>
                        </dd>
                    </dl>
                </div>   
            </div>
            <div class="bottom">
                <div class="bot-left">
                    <h6>热销商品</h6>
                    <ul class="template">
                        <li><a href="#">
                            <img src="./img/fy1.jpg" alt="">
                            <h2>￥499.00</h2> 
                            <p>全铜餐厅客厅家用铜灯 多款可选 罗马假日 </p>
                         </a></li>
                         <li><a href="#">
                            <img src="./img/fy2.jpg" alt="">
                            <h2>￥398.00</h2> 
                            <p>欧式客厅吊灯 全铜餐厅客厅家用铜灯 </p>
                         </a></li>
                         <li><a href="#">
                            <img src="./img/fy3.jpg" alt="">
                            <h2>￥469.00</h2> 
                            <p>三段调光卧室灯 铜色镂空边框吸顶灯 欧丽 </p>
                         </a></li>
                         <li><a href="#">
                            <img src="./img/fy4.jpg" alt="">
                            <h2>￥999.00</h2> 
                            <p> LED平板灯厨卫灯厨房灯卫生间照明灯  白色款 </p>
                         </a></li>
                    </ul>
                </div>
                <div class="bot-right">
                    <ul>
                        <li>商品介绍</li>
                        <li>商品参数</li>
                        <li>售后服务</li>
                        <li>商品评价</li>
                        <li>商品咨询</li>
                        <li>问大家</li>
                    </ul>
                    <a href=""><img src="./img/TB2.jpg" alt=""></a>
                </div>
            </div>
        </div>  
    </article>
    <footer>
        <div class="main f_main">
            <div class="f_box1">
                <div class="f_bo1">
                    <p>扫码快捷购物</p>
                    <img src="./img/QR_code.png" alt="">
                </div>
                <div class="f_bo2">
                    <p>官方商城电话</p>
                    <h4>0512-63828888-5022</h4>
                    <h4>0512-63828888-5333</h4>
                    <p>工作时间</p>
                    <h4>周一到周日 8:00-凌晨1:00</h4>
                </div>
            </div>
            <ul>
                <li>购物指南
                    <h6>购物须知</h6>
                </li>
                <li>支付方式</li>
                <li>配送服务</li>
                <li>售后保障</li>
                <li>关于欧普</li>
            </ul>
            <h5>Copyright © 1996-2017欧普照明股份有限公司版权所有&nbsp;&nbsp;|&nbsp;&nbsp;沪ICP备15024911号-1</h5>
            <div class="f_box2">
                <img src="./img/foot1.png" alt="">
                <img src="./img/foot2.png" alt="">
                <img src="./img/foot3.png" alt="">
            </div>
        </div>
    </footer>


    <script>
        let m=1
        $(".add").click(function(){
            if(m<10000){ m++;}
            $(".num").attr("value",m)
        })
        $(".sub").click(function(){
            if(m>1){ m--;}
            $(".num").attr("value",m)
        })


        $(function(){
            let id = window.location.href.slice(window.location.href.indexOf("?") + 4)
            console.log(id)
            $.ajax({
                url:"http://127.0.0.1:56/searData",   
                data:{
                    id:id
                },
                success:function(data){
                    var data=JSON.parse(data)
                    console.log(data)
                    data.forEach(item=>{
                        let temp =$(".content")
                        temp.find(".im1").attr("src",`./img/${item.src}.jpg`)
                        temp.find(".im2").attr("src",`./img/${item.src}.jpg`)
                        temp.find("h3").html(`${item.acon}`)
                        temp.find(".jiage").html(item.price)
                        
                    })
                }   
            })  
        })















        $(".h_span1").mouseenter(function(){
            $(".xiala1").css({
                display:"inline-block",
                transform: "rotate(180deg)",
                transition:"0.5s",
            })
            $(".box1").show()    
        }).mouseleave(function(){
            $(".xiala1").css({
                display:"inline-block",
                transform: "rotate(0deg)",
                transition:"0.5s",
            })
            $(".box1").hide()
        })
 
        $("#ul1_a2").mouseenter(function(){
            $(".box2").show()    
        }).mouseleave(function(){
            $(".box2").hide() 
        })
        $("#ul1_a1").mouseenter(function(){
            $(".box3").slideDown() 
        }).mouseleave(function(){
            $(".box3").hide() 
        })
        $(".bannerLeft .navLi").mouseenter(function(){
            $(this).find($(".nav-items")).show()
        }).mouseleave(function(){
            $(this).find($(".nav-items")).hide()
        })

        // 详情页购物车
        $(".picUl li").mouseenter(function(){
            $(".picUl li").css({
                border:"1px solid rgba(0,0,0,0)",
            })
            $(this).css({
                border:"1px solid #013ca6",
            })  
            $(".original img").attr("src",$(this).find(".liImg").attr("src"))
            $(".bigbox img").attr("src",$(this).find(".liImg").attr("src"))
        }).mouseleave(function(){
            $(".picUl li").css({
                border:"1px solid rgba(0,0,0,0)",
            })  
            $(this).css({
                border:"1px solid #013ca6",
            }) 
        })
        // 左右按钮点击事件
        let n=0;
        let liList=$(".picUl li");
        $("#btn1").click(function(){
            if(n>0&&n<liList.length){
                n--;
                $(".picUl ul").animate({
                marginLeft:-(n*76)}
            )}
        })
        $("#btn2").click(function(){
          
            if(n<liList.length-1&&n>=0){
                n++;
                $(".picUl ul").animate({
                marginLeft:-(n*76)}
            )}
        })
    
    
    
    //    放大镜
        $(".original").mouseenter(function(){
            $(".bigbox").show()
            $(".mask").show()
        }).mouseleave(function(){
            $(".bigbox").hide()
            $(".mask").hide()
        })
        let mask=$(".mask")
        $(".original").mousemove(function(e){
            let X=e.offsetX-mask.width()/2
            let Y=e.offsetY-mask.height()/2
            // 边界问题
            if(X<0){X=0}
            if(X>($(".original").width()-mask.width())){X=$(".original").width()-mask.width()}
            if(Y<0){Y=0}
            // console.log($(".original").height())
            if(Y>($(".original").height()-mask.height())){Y=$(".original").height()-mask.height()}
            // 遮罩层移动
            $(".mask").css({
                left:X+"px",
                top:Y+"px"
            });
            let y = Y/ $(this).height();
            let x = X/ $(this).width();
            
				$(".bigbox img").css({
					left:-x*$(".bigbox img").width(),
                    top:-y * $(".bigbox img").height()
				})
        })
        // .mouseleave(function(){
        //     $(".bigbox").hide()
        //     $(".mask").hide()
        // })
        





// 三级联动
        let province = $("#province")
        let city = $("#city")
        let area = $("#area")
        // 更新区域数据
        function updateArea() {
            // 清掉区内的内容准备重新插入
            area.html("")
            // 返回当前选中的城市的数据对象
            let cData = citys[province[0].selectedIndex].city[city[0].selectedIndex].area;
            cData.forEach((item, index) => {
                let option = $(`<option>${item}</option>`)
                area.append(option)
            })
            map.centerAndZoom(province.val() + city.val() + area.val(), 15);
        }
        province.change(function () {
            // 清掉城市内的内容准备重新插入
            city.html("")
            // 返回当前选中的省份的数据对象
            let pData = citys[this.selectedIndex];

            pData.city.forEach((item, index) => {
                let option = $(`<option>${item.name}</option>`)
                city.append(option)
            })

            updateArea()
        })
        city.change(function () {
            updateArea()
        })
        area.change(function () {
            map.centerAndZoom(province.val() + city.val() + area.val(), 15);
        })
        citys.forEach((item, index) => {
            let option = $(`<option>${item.name}</option>`)
            province.append(option)
            city.append(`<option>${citys[0].city[0].name}</option>`)
            area.append(`<option>${citys[0].city[0].area[0]}</option>`)
        })
    </script>
</body>
</html>